<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.a {
			background: transparent;
			color: #23b7cb;
			font-size: 15px;
			padding: 5px 15px;
			border: 1px transparent solid;
			border-image: linear-gradient(to right, #000718, #23b7cb) 1 10;
			width: 400px;
			height: 200px;
		}

		.b {
			color: #23b7cb;
			font-size: 15px;
			padding: 5px 15px;
			background: #fff;
			border: 1px transparent solid;
			border-radius: 30px;
			position: relative;
			width: 400px;
			height: 200px;
		}

		.b:after {
			content: '';
			position: absolute;
			top: -3px;
			bottom: -3px;
			left: -3px;
			right: -3px;
			background: linear-gradient(135deg, #000781, #23b7cb);
			border-radius: 30px;
			content: '';
			z-index: -1;
		}

		.content {
			width: 100px;
			height: 100px;
			border: 10px solid #ddd;
			border-image: -webkit-linear-gradient(red, yellow) 30 30;
			border-image: -moz-linear-gradient(red, yellow) 30 30;
			border-image: linear-gradient(red, yellow) 30 30;
		}



		.content1 {
			width: 100px;
			height: 100px;
			box-sizing: border-box;
			padding: 5px;
			border-radius: 50%;
			background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
			background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
			background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
		}

		.box {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: #fff;
		}

		/* 但是border-image无法实现圆角 */
		
	.top{
	  position:absolute;
	  top:40%;
	  left:50%;
	  transform:translate(-50%,-50%);
	  text-align:center;
	  color:#CCC9DC;
	}
	button{
	  display:inline-block;
	  padding:7px 20px;
	  text-transform:uppercase;
	  font-weight:600;
	  letter-spacing:1.5px;
	  text-align:center;
	  line-height:17px;
	  background:#FFF;
	  color:#F58549;
	  border:4px solid;
	  border-image-source: linear-gradient(to right,#08fdd8,#F58549, red);
	  border-image-slice:1;
	  cursor:pointer;
	 }
	</style>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="content"></div>
		<div class="content1">
			<div class=" box"></div>
		</div>
		
		<div class="top">
		  <h2><u>Gradient-border-button</u></h2>
		  <button>me button!</button>
		</div>
	</body>
</html>
